<!--
 * @Author: [you name]
 * @Date: 2021-09-22 14:16:56
 * @LastEditors: [you name]
 * @LastEditTime: 2021-10-12 19:12:13
 * @Description: 
-->
<template>
  <div>
    <Header></Header>

    <div class="content">
      <div class="wrapper1">
        <!-- 左边的轮播图 -->
        <div class="swiper">
          <!-- 走马灯实现轮播图 前面加上冒号就是数据绑定-->
          <el-carousel
            height="586px"
            position="relative"
            indicator-position="outside"
          >
            <el-carousel-item v-for="news in newsData" :key="news.id">
              <img :src="news.cover" alt="" />
              <div class="swiperSpan">
                <div class="nowSpan">
                  <span>{{ news.title }} </span>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <!-- 右边的头条新闻 -->
        <div class="newsRight">
          <div class="news_icon">头条新闻</div>
          <el-carousel
            height="586px"
            position="relative"
            indicator-position="none"
          >
            <el-carousel-item v-for="news in newsData" :key="news.id">
              <div class="header">
                <div class="headerData">
                  {{ news.title }}
                </div>
              </div>

              <div class="time">
                <div class="timeMain">{{ news.publishTime | fmtDate }}</div>
              </div>
              <!-- 文章详细内容 -->
              <div class="newsArticle">
                <div class="articleDetail" v-html="news.content">
                  {{ news.content }}
                </div>
              </div>

              <!-- 了解更多 -->
              <div class="more">
                <div class="moreImg" @click="toKnow(news)">
                  了解更多 &gt;&gt;
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>

    <!-- 综合要闻 -->
    <div class="allNews">
      <div class="wrapper1">
        <div class="allnews_title">
          <div class="allnews_title_img">综合要闻</div>
          <!-- 更多 -->
          <div class="allNews_title_more">
            <img src="https://news.hnu.edu.cn/images/hnnews_17.png" alt="" />
          </div>
        </div>
        <!-- 主体部分 -->
        <div class="allNews_Main">
          <ul class="newsList">
            <li v-for="all in newsAllData.slice(0, 8)" :key="all.id">
              <div class="img" @click="toArticle(all)">
                <img :src="all.cover" alt="" />
              </div>
              <!-- 标题 -->
              <div class="newsList_title">
                {{ all.title }}
              </div>
              <!-- 底部 -->
              <div class="newsList_bottom">
                <!-- 发布时间 -->
                <div class="sendTime">
                  {{ all.publishTime | fmtDate }}
                </div>
                <!-- 更多 -->
                <div class="newList_more">
                  <div class="img" @click="toArticle(all)">查看</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 第三部分 -->
    <div class="thirdContent">
      <div class="wrapper1">
        <div class="meiti">
          <div class="title">
            <div class="img">媒体湖大</div>
            <div class="right_more">
              <img src="https://news.hnu.edu.cn/images/hnnews_17.png" alt="" />
            </div>
          </div>

          <div class="content3_content_ul1">
            <ul v-for="item in meitiData" :key="item.id">
              <li>
                <div class="div_title" @click="toMeiti(item)">
                  <img src="http://news.gzhu.edu.cn/images/ico3.png" />
                  {{ item.title }}
                </div>
                <div class="div_time">
                  {{ item.publishTime | fmtDate }}
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="xuefu">
          <div class="title">
            <div class="img">学府经纬</div>
            <div class="right_more">
              <img src="https://news.hnu.edu.cn/images/hnnews_17.png" alt="" />
            </div>
          </div>

          <div class="content3_content_ul1">
            <ul v-for="item in xuefuData" :key="item.id">
              <li>
                <div class="div_title" @click="toXuefu(item)">
                  <img src="http://news.gzhu.edu.cn/images/ico3.png" />
                  {{ item.title }}
                </div>
                <div class="div_time">
                  {{ item.publishTime | fmtDate }}
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="shiting">
          <div class="title">
            <div class="img">湖大人物</div>
            <div class="right_more">
              <img src="https://news.hnu.edu.cn/images/hnnews_17.png" alt="" />
            </div>
          </div>

          <div class="content3_content_ul1">
            <ul v-for="item in renwuData" :key="item.id">
              <li>
                <div class="div_title" @click="toRenwu(item)">
                  <img src="http://news.gzhu.edu.cn/images/ico3.png" />
                  {{ item.title }}
                </div>
                <div class="div_time">
                  {{ item.publishTime | fmtDate }}
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- 友情链接部分 -->
    <div class="friendLink">
      <div class="wrapper1">
        <div class="linkContent">
          <!-- 上面部分 -->
          <div class="linkTop">
            <div class="lian">
              友情链接
              <div class="lianIcon"></div>
            </div>
          </div>
          <!-- 下面部分 -->
          <div class="linkBottom">
            <li><a href="https://www.hnu.edu.cn/">湖南大学</a></li>
            <li><a href="http://admi.hnu.edu.cn/">湖南大学招生信息网</a></li>
            <li><a href="http://scc.hnu.edu.cn/">湖南大学就业网</a></li>
            <li><a href="http://ylsy.hnu.edu.cn/">湖南大学岳麓书院 </a></li>

            <!-- 四个图标 -->
            <div class="mainIcon">
              <div class="icon1">
                <a
                  href="https://weibo.com/hunanuniversity?refer_flag=2725420000_weiboxiu&is_hot=1"
                  ><img src="https://news.hnu.edu.cn/images/ico1.png" alt=""
                /></a>
              </div>
              <div class="icon2">
                <a href=""
                  ><img src="https://news.hnu.edu.cn/images/ico2.png" alt=""
                /></a>
              </div>
              <div class="icon3">
                <a
                  href="https://www.douyin.com/user/MS4wLjABAAAAuhWu55VCSTU90lyS43EBdMhpkJOjIglBn10B9EvIiI4?enter_method=search_result&extra_params=%7B%22search_id%22%3A%2220211002230738010133028142243558BD%22%2C%22search_result_id%22%3A%2258320597826%22%2C%22search_keyword%22%3A%22%E6%B9%96%E5%8D%97%E5%A4%A7%E5%AD%A6%22%2C%22search_type%22%3A%22user%22%7D&enter_from=search_result"
                  ><img src="https://news.hnu.edu.cn/images/ico3.png" alt=""
                /></a>
              </div>
              <div class="icon4">
                <a href="https://space.bilibili.com/391952271"
                  ><img src="https://news.hnu.edu.cn/images/ico4.png" alt=""
                /></a>
              </div>
            </div>

            <!-- 微信二维码 -->
            <div class="erweima">
              <img src="https://news.hnu.edu.cn/images/ico6.jpg" alt="">
            </div>

          </div>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <div class="footer">
      <div class="footerMain">
        <ul>
          <li>版权所有：湖南大学党委宣传部（新闻办公室)</li>
          <li>技术支持：湖南大学互联网信息服务研究中心</li>
          <li>热线电话：88822804 | 88823984 </li>
          <li>邮箱：news@hnu.edu.cn</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "./components/Header.vue";
import { get } from "../utils/request";
export default {
  components: {
    Header,
  },
  data() {
    return {
      //轮播图脚下的标题 参数
      news: {
        page: 1,
        pageSize: 5,
        categoryId: 3,
      },
      //轮播图脚下的标题 接收参数
      newsData: [],
      //综合要闻的接口数据
      newsAllData: [],
      zongheData: {
        page: 1,
        pageSize: 10,
        categoryId: 4,
      },

      //媒体湖大的接口数据
      meitiData: [],
      meiti: {
        page: 1,
        pageSize: 5,
        categoryId: 5,
      },

      //学府经纬的接口数据
      xuefuData: [],
      xuefu: {
        page: 1,
        pageSize: 5,
        categoryId: 6,
      },

      //湖大人物的接口数据
      renwuData: [],
      renwu: {
        page: 1,
        pageSize: 5,
        categoryId: 8,
      },
    };
  },
  methods: {

    //湖大人物的接口数据
    getRenwuData() {
      get("/index/article/pageQuery", this.renwu).then((res) => {
        // console.log(res.data.list);
        this.renwuData = res.data.list;
      });
    },

    //学府经纬的接口数据
    getXuefuData() {
      get("/index/article/pageQuery", this.xuefu).then((res) => {
        console.log(res.data.list);
        this.xuefuData = res.data.list;
      });
    },

    // 媒体湖大的接口数据
    getMeitiData() {
      get("/index/article/pageQuery", this.meiti).then((res) => {
        console.log(res.data.list);
        this.meitiData = res.data.list;
      });
    },

    // 媒体湖大的页面太区庄详情
    toRenwu(item) {
      this.$router.push({
        path: "/article",
        query: item,
      });
    },

    // 媒体湖大的页面太区庄详情
    toXuefu(item) {
      this.$router.push({
        path: "/article",
        query: item,
      });
    },

    // 媒体湖大的页面太区庄详情
    toMeiti(item) {
      this.$router.push({
        path: "/article",
        query: item,
      });
    },

    // 头条新闻的页面太区庄详情
    toKnow(Item) {
      this.$router.push({
        path: "/article",
        query: Item,
      });
    },
    // 综合要闻标签页跳转
    toArticle(all) {
      this.$router.push({
        path: "/article",
        query: all,
      });
    },
    // 获取综合要闻数据
    getAllnesData() {
      get("/index/article/pageQuery", this.zongheData).then((res) => {
        // console.log(res.data.list);
        this.newsAllData = res.data.list;
      });
    },
    //获取头条新闻的数据
    getNewsData() {
      get("/index/article/pageQuery", this.news).then((res) => {
        // console.log(res.data.list);
        this.newsData = res.data.list;
      });
    },
  },
  created() {
    this.getNewsData();
    this.getAllnesData();
    this.getMeitiData();
    this.getXuefuData();
    this.getRenwuData();
  },
};
</script>

<style lang="scss" scoped>
.content {
  .wrapper1 {
    height: 610px;
    background-color: rgb(247, 247, 247);
    display: flex;
    .swiper {
      flex: 3;
      img {
        width: 928px;
      }
      .swiperSpan {
        height: 54px;
        width: 928px;
        background-color: rgba(0, 0, 0, 0.6);
        position: absolute;
        bottom: 0;
        .nowSpan {
          width: 528px;
          height: 54px;
          // background-color: rgb(228, 55, 55);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-left: 20px;
          span {
            color: #fff;
            font-size: 21px;
            line-height: 54px;
          }
        }
      }
    }
    .newsRight {
      flex: 1;
      // width: 292px;
      height: 586px;
      background-color: rgb(247, 247, 247);
      margin: 0 auto;
      border-bottom: 1px solid #b8b2b2;
      .news_icon {
        background: url(https://news.hnu.edu.cn/images/hnnews_8.png);
        width: 175px;
        height: 43px;
        text-align: center;
        line-height: 43px;
        font-size: 21px;
        color: #fff;
      }
      .header {
        width: 100%;
        height: 20%;
        // background-color: rgb(35, 199, 131);
        overflow: hidden;
        .headerData {
          width: 85%;
          height: 80%;
          margin: 30px 30px 0 30px;
          box-sizing: border-box;
          color: #b1040e;
          font-size: 21px;
          font-weight: bold;
          // background-color: rgb(202, 30, 30);
        }
      }
      .time {
        height: 32px;
        width: 100%;
        text-align: center;
        .timeMain {
          height: 90%;
          margin: 10px 30px 30px 30px;
          box-sizing: border-box;
          font-size: 18px;
          text-align: left;
          color: rgba(0, 0, 0, 0.411);
        }
      }
      .newsArticle {
        width: 100%;
        height: 50%;
        overflow: hidden;
        font-family: serif;
        .articleDetail {
          width: 85%;
          height: 96%;
          margin: 0 20px 20px 20px;
          font-size: 16px;
          color: #0c0c0c;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          line-height: 1.8em;
        }
      }
      .more {
        width: 100%;
        height: 10%;
        // border-bottom: 1px solid #0c0c0c;
        margin-top: 20px;
        position: relative;
        .moreImg {
          width: 188px;
          height: 42px;
          background: url(https://news.hnu.edu.cn/images/hnnews_9.jpg);
          position: absolute;
          top: 50%;
          left: 50%;
          margin-top: -21px;
          margin-left: -94px;
          text-align: center;
          line-height: 42px;
          color: #fff;
          font-size: 16px;
          cursor: pointer;
          font-family: serif;
        }
      }
    }
  }
}

.allNews {
  background-color: rgb(247, 247, 247);
  width: 100%;
  height: 856px;
  margin-top: 35px;
  .wrapper1 {
    .allnews_title {
      width: 100%;
      height: 32px;
      padding: 35px 0 25px 0;
      margin: 0 auto;
      position: relative;
      .allnews_title_img {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -21px;
        margin-left: -94px;
        font-size: 24px;
        text-align: center;
        // color: #b1040e;
        color: #fff;
        font-weight: bold;
        width: 188px;
        height: 42px;
        line-height: 42px;
        background: url(https://news.hnu.edu.cn/images/hnnews_9.jpg);
        display: inline-block;
      }
      .allNews_title_more {
        position: absolute;
        right: 20px;
        bottom: 40px;
        width: 55px;
        height: 15px;
        display: inline-block;
        img {
          width: 100%;
          cursor: pointer;
        }
      }
    }

    // 综合要闻图文部分
    .allNews_Main {
      height: 714px;
      .newsList {
        li {
          width: 280px;
          height: 325px;
          background-color: #fff;
          border: 1px solid rgb(204, 199, 193);
          box-sizing: border-box;
          margin: 30px 29px 0 0;
          float: left;
          box-shadow: 5px 5px 5px rgb(175, 170, 170);
          border-radius: 8px;
          .img {
            height: 190px;
            cursor: pointer;
            img {
              width: 100%;
              height: 190px;
              transition: all 0.6s;
              border-radius: 8px;
            }
            img:hover {
              transform: scale(1.03);
            }
          }
          .newsList_title {
            height: 52px;
            padding: 5px 20px 0 20px;
            color: rgb(83, 82, 82);
            font-size: 16px;
            line-height: 1.5em;
            overflow: hidden;
            text-overflow: ellipsis;
            word-spacing: nowrap;
            margin-top: 10px;
          }
          .newsList_bottom {
            height: 40px;
            margin-top: 10px;
            display: flex;
            .sendTime {
              flex: 1;
              text-align-last: left;
              line-height: 40px;
              padding-left: 20px;
              font-size: 18px;
              color: rgb(180, 180, 180);
            }
            .newList_more {
              flex: 1;
              background-color: #ffffff;
              position: relative;
              font-size: 11x;
              .img {
                height: 20px;
                position: absolute;
                right: 20px;
                bottom: 10px;
                background: url(https://news.hnu.edu.cn/images/hnnews_16.png);
                width: 78px;
                color: #fff;
                text-align: center;
                cursor: pointer;
              }
            }
          }
        }
      }
    }

    // 友情链接部分
  }
}

// 第三部分内容
.thirdContent {
  height: 450px;
  margin-top: 50px;
  background-color: rgb(247, 247, 247);
  .wrapper1 {
    height: 400px;
    display: flex;
    margin-top: 60px;
    .meiti {
      flex: 1;
      background-color: #fff;
      margin-right: 20px;
      border: 1px solid #b8b2b2;
      border-radius: 10px;
      .title {
        height: 43px;
        background-color: #fff;
        position: relative;
        .img {
          display: inline-block;
          text-align: center;
          line-height: 43px;
          color: #fff;
          font-size: 21px;
          width: 175px;
          height: 43px;
          background: url(https://news.hnu.edu.cn/images/hnnews_8.png);
        }
        .right_more {
          display: inline-block;
          margin-left: 150px;
          width: 55px;
          height: 15px;
          img {
            width: 100%;
            cursor: pointer;
          }
        }
      }

      .content3_content_ul1 {
        margin-top: 30px;
        width: 396px;
        height: 260px;
        li {
          margin-top: 5.5px;
          height: 60px;
          display: flex;
          // background-color: rgba(248, 229, 186, 0.308);
          border-bottom: 1px solid #b8b2b2;
          div {
            line-height: 60px;
          }
          .div_title {
            width: 70%;
            font-size: 17px;
            // border: 1px solid red;
            padding-left: 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: pointer;
          }
          .div_time {
            width: 30%;
            font-size: 15px;
            text-align: center;
          }
        }
      }
    }
  }
  .xuefu {
    flex: 1;
    margin-right: 20px;
    border: 1px solid #b8b2b2;
    background-color: #fff;
    border-radius: 10px;
    .title {
      height: 43px;
      background-color: #fff;
      position: relative;
      .img {
        display: inline-block;
        text-align: center;
        line-height: 43px;
        color: #fff;
        font-size: 21px;
        width: 175px;
        height: 43px;
        background: url(https://news.hnu.edu.cn/images/hnnews_8.png);
      }
      .right_more {
        display: inline-block;
        margin-left: 150px;
        width: 55px;
        height: 15px;
        img {
          width: 100%;
          cursor: pointer;
        }
      }
    }
    .content3_content_ul1 {
      margin-top: 30px;
      width: 396px;
      height: 260px;
      li {
        margin-top: 5.5px;
        height: 60px;
        display: flex;
        // background-color: rgba(248, 229, 186, 0.308);
        border-bottom: 1px solid #b8b2b2;
        div {
          line-height: 60px;
        }
        .div_title {
          width: 70%;
          font-size: 17px;
          // border: 1px solid red;
          padding-left: 5px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          cursor: pointer;
        }
        .div_time {
          width: 30%;
          font-size: 15px;
          text-align: center;
        }
      }
    }
  }
  .shiting {
    flex: 1;
    background-color: #fff;
    border: 1px solid #b8b2b2;
    border-radius: 10px;
    .title {
      height: 43px;
      background-color: #fff;
      position: relative;
      .img {
        display: inline-block;
        text-align: center;
        line-height: 43px;
        color: #fff;
        font-size: 21px;
        width: 175px;
        height: 43px;
        background: url(https://news.hnu.edu.cn/images/hnnews_8.png);
      }
      .right_more {
        display: inline-block;
        margin-left: 150px;
        width: 55px;
        height: 15px;
        img {
          width: 100%;
          cursor: pointer;
        }
      }
    }
    .content3_content_ul1 {
      margin-top: 30px;
      width: 396px;
      height: 260px;
      li {
        margin-top: 5.5px;
        height: 60px;
        display: flex;
        // background-color: rgba(248, 229, 186, 0.308);
        border-bottom: 1px solid #b8b2b2;
        div {
          line-height: 60px;
        }
        .div_title {
          width: 70%;
          font-size: 17px;
          // border: 1px solid red;
          padding-left: 5px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          cursor: pointer;
        }
        .div_time {
          width: 30%;
          font-size: 15px;
          text-align: center;
        }
      }
    }
  }
}

// 友情链接部分
.friendLink {
  .wrapper1 {
    .linkContent {
      height: 150px;
      width: 100%;
      margin-top: 30px;
      .linkTop {
        height: 50px;
        font-size: 18px;
        line-height: 50px;
        border-bottom: 1px solid #d11d29;
        .lian {
          margin-left: 10px;
          color: #b1040e;
          width: 100px;
          text-align: center;
          border-bottom: 2px solid #d11d29;
          box-sizing: border-box;
          position: relative;
          .lianIcon {
            height: 0;
            width: 0;
            border: 5px solid transparent;
            border-bottom: 5px solid #b1040e;
            position: absolute;
            top: 40px;
            left: 46px;
          }
        }
      }
      .linkBottom {
        height: 95px;
        position: relative;
        li {
          width: 200px;
          float: left;
          height: 95px;
          line-height: 95px;
          margin-left: 10px;
          color: #b1040e;
        }

        //四个图标
        .mainIcon {
          margin-top: 20px;
          width: 250px;
          height: 52px;
          position: absolute;
          right: 0;
          display: flex;
        }
        .icon1 {
          flex: 1;
          img {
            width: 55px;
          }
        }
        .icon2 {
          flex: 1;
          img {
            width: 55px;
          }
         
        }
        .icon2 a img:hover .erweima{
          display: block;
        }
        .icon3 {
          flex: 1;
          img {
            width: 55px;
          }
        }
        .icon4 {
          flex: 1;
          img {
            width: 55px;
          }
        }
      }
       .erweima{
            display: inline-block;
            width: 129px;
            height: 129px;
            background-color: cyan;
            margin-top: 75px;
            margin-left: 175px;
            display: none;
          }

    }
  }
}

// 底部
.footer {
  margin-top: 40px;
  height: 200px;
  width: 100%;
  background-color: rgb(212, 11, 11);
  background: url(https://www.hnu.edu.cn/images/hn-foot-bg.jpg);
  position: relative;
  .footerMain{
    width: 85%;
    height: 50px;
    // background-color: rgb(41, 211, 78);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -618.5px;
    margin-top: -30px;
    ul{
      li{
        float: left;
        // background-color: rgb(82, 52, 255);
        color:#fff;
        line-height: 50px;
      }
      li:nth-child(n+2){
        margin-left: 90px;

      }
    }
  }
}
</style>